@mixin background-vertical($prime-color,$prime-pos,$second-color,$second-pos){
background: $prime-color; 
background: -moz-linear-gradient(top,  $prime-color $prime-pos, $second-color $second-pos); 
background: -webkit-gradient(linear, left top, left bottom, color-stop($prime-pos,$prime-color), color-stop($second-pos,$second-color)); 
background: -webkit-linear-gradient(top,  $prime-color $prime-pos,$second-color $second-pos); 
background: -o-linear-gradient(top,  $prime-color $prime-pos,$second-color $second-pos); 
background: -ms-linear-gradient(top,  $prime-color $prime-pos,$second-color $second-pos); 
background: linear-gradient(to bottom,  $prime-color $prime-pos,$second-color $second-pos); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$prime-color', endColorstr='$second-color',GradientType=0 );
}
@mixin background-horizontal($prime-color,$prime-pos,$second-color,$second-pos){
background: $prime-color; 
background: -moz-linear-gradient(left,  $prime-color $prime-pos, $second-color $second-pos); 
background: -webkit-gradient(linear, left top, right top, color-stop($prime-pos,$prime-color), color-stop($second-pos,$second-color)); 
background: -webkit-linear-gradient(left,  $prime-color $prime-pos,$second-color $second-pos); 
background: -o-linear-gradient(left,  $prime-color $prime-pos,$second-color $second-pos); 
background: -ms-linear-gradient(left,  $prime-color $prime-pos,$second-color $second-pos); 
background: linear-gradient(to right,  $prime-color $prime-pos,$second-color $second-pos); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$prime-color', endColorstr='$second-color',GradientType=1 ); 

}
@mixin clearfix(){
zoom:1;
    &:after {
        content:""; 
        display: block; 
        height: 0; 
		clear: both; 
    }   
}
@mixin opacity($value){
		opacity:$value;
		filter:alpha(opacity=($value*100));
		zoom:1;
}
body, header,section, table, div, nav, ul, li, a, p, aside,tr, td, footer 
{
margin:0;
padding:0;
}
body{
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	line-height:1.4;
	img{max-width:100%; max-height:100%;}
		#wrapper{
		width:75%;
		margin:0 auto;
			&>header{
			display:block;
			width:100%;
				div.select{
				display:inline-block;
				position:relative;
				left:71%;
				margin-top:1%;
					#language{
					font-size:0.7em;
					float:right;
					}
					#currency{
					font-size:0.7em;
					width:35%;
					float:right;
					margin-right:2%;
					}
				}
				div.logo-container{
					width:13.5%;
					display:inline-block;
					float:left;
					position:relative;
					left:4%;
					img{					
					display:inline-block;
					}
				}
				div.reg-container{
				margin-top:1%;
				width:22%;
				display:inline-block;
				float:right;
				position:relative;		
				color:#7D9D22;				
					label{
					font-weight:bold;
					}
					input{
					color:white;
					@include background-vertical(#7D9D22, 70%, white, 100%);
					border:none;
					border-radius:5px;
					padding:1%;
					width:64%;
					}
					.pass{
						#pass{
						margin-left:1.3%;
						}
					}
					.log{
					margin-top:3%;
					width:33%;
					display:inline-block;
					float:right;
					background:#7D9D22;
					border-radius:5px;
					font-weight:bold;
						&:last-of-type{
						margin-right:2%;
						}				
						a{
						text-align:center;
						display:block;
						color:white;
						text-decoration:none;
						padding:7% 15%;						
						}
					}
				}
				nav{
					ul#main-ul{
					padding-left:0.5%;
					list-style-type:none;
					position:relative;
					display:inline-block;
					width:100%;
					border:none;
					margin-bottom:1%;
						&>li{
						position:relative;
						float:left;
						border-collapse:collapse;
						border-right:2px solid white;
						text-align:center;
						font-size:1.3em;
						width:14%;
						display:inline-block;
						background:#4F095F;
							&:last-of-type{
							border-left:none;
							}
							&:hover{
							background:#7D9D22;							
								.hidden{
								display:block;
								}								
							}
							&>a{
							padding:1% 0;
							width:100%;
							color:white;
							text-decoration:none;
							}
							ul#brands{
							z-index:1;
							width:93%;
							left:0;
								li{
								text-align:center;
								position:static;
								float:left;
								display:inline-block;
								width:100%;
								margin:3%;
									a{
									&:hover{
									color:black;
									}
									display:block;
									color:white;
									width:100%;
									}
								}
								}
							&>ul{
							z-index:1;
							padding:4%;
							position:absolute;
							left:-40%;
							top:105%;
							display:none;
							list-style-type:none;
							width:290%;
							background:lightgray;
							border-radius:5px;
							@include background-vertical(#7D9D22, 0%, #CDEA77, 100%);							
								&>li{								
								text-align:left;
								display:inline-block;
								float:left;
								font-size:0.9em;								
									&>a{
									display:block;
									width:100%;										
									text-decoration:none;
									color:white;
										&:hover{
										color:black;
										}
										&:active{
										color:lightblue;
										}
									}
									ul{
									list-style-type:none;
									padding:5%;
										li{
										font-size:0.8em;
										margin:4%;
											a{
											color:white;
											display:block;
											width:100%;
											text-decoration:none;
												&:hover{
												color:black;
												}
												&:active{
												color:lightblue;
												}
											}
										}
									}
								}
							}
							
						}
					}
				}
			}
			
			
		}
		section{
		margin:3% 0;
			sup{
			color:red;
			font-weight:bold;
			}
			.info{
			position:relative;
			width:20%;
			margin:0 55%;
			text-align:right;
			}
			.header{
			position:relative;			
			text-align:center;
			width:100%;
			margin:0 auto;
			background:#4F095F;
			color:white;
			font-weight:bold;
			font-size:1.2em;
			}
			form{
			padding:2% 0;
			background:#7D9D22;
			width:50%;
			border:1px solid black;
			display:inline-block;
			position:relative;
			left:25%;
				div{
					label{				
					color:#fff;
					display:inline-block;
					width:40%;
					text-align:right;
					}
					&>input{	
					margin-top:1%;				
					width:50%;
					height:25px;
						&:hover{
						background:white;
						box-shadow:1% 1% 1% 1% black inset;
						}
					}
					.select{
					margin-top:1%;
					width:51%;
					height:26px;
					}					
				}
				.buttons{
				width:100%;
				text-align:center;
				margin-top:2%;
					&>input{
					height:32px;
					font-weight:bold;
					font-size:1.1em;
					padding:1% 0;
					border-radius:5px;
					color:white;
					display:inline-block;
					width:18%;
					background:#4F095F;
					border:none;
						&:hover{
						background:#fff;
						color:#4F095F;
						border-top:2px inset #4F095F;
						border-left:2px inset #4F095F;
						border-bottom:2px inset #fff;
						border-right:2px inset #fff;
						}
					}
				}
				
			}
		}
		footer{
			display:inline-block;
			width:100%;
			margin-top:5%;
				div{
				display:inline-block;
				width:100%;
					.help{
					display:inline-block;
					float:left;
					width:20%;
					
						&>div{
						width:90%;
						font-size:1.4em;
						color:white;
						padding-left:4%;
						@include background-horizontal(#848587, 20%, #fff, 100%);
						}
						&>ul{					
						padding-left:10%;
						list-style-type:none;
							li{
							margin:3% 0;
								a{
								display:inline-block;
								width:100%;							
								text-decoration:none;
								color:#4F095F;
									&:hover{
									color:#7D9D22;
									}
								}
							}
						}
					}
					.social-media{
					display:inline-block;
					position:relative;
					float:left;
					width:25%;
					margin-left:1%;
						&>div{
						width:90%;
						font-size:1.4em;
						color:white;
						padding-left:4%;
						@include background-horizontal(#848587, 20%, #fff, 100%);
						}
						&>ul{
						list-style-type:none;
							li{
							display:inline-block;					
							width:50px;
							height:50px;
							margin:1% 0;
								&>a{
								display:block;							
								width:100%;
								height:100%;
									img{
										&:hover{
											@include opacity(0.6);
											}
									}
								}
							}
						}
					}
					.pay{
						display:inline-block;
						position:relative;
						float:left;
						width:30%;
						margin-left:1.5%;
						@include clearfix;
							div{
							width:90%;
							font-size:1.4em;
							color:white;
							padding-left:4%;
							@include background-horizontal(#848587, 20%, #fff, 100%);
							}
							img{
								
							}
						}
				}
				.copyright{
				margin-top:1%;
				text-align:center;
				color:gray;
				}
			}
}